// import React from 'react';
import { Outlet } from 'react-router-dom';
import { Top, Tab, TabItem } from './style';
import { NavLink } from 'react-router-dom';

function Home() {
  return (
    <>
      <Top>
        <span className='iconfont menu'>&#xe65c;</span>
        <span className='title'>WebApp</span>
        <span className='iconfont search'>&#xe62b;</span>
      </Top>
      <Tab>
        <NavLink to='/home/recommend'>
          <TabItem>
            <span> 推荐 </span>
          </TabItem>
        </NavLink>
        <NavLink to='/home/singers'>
          <TabItem>
            <span> 歌手 </span>
          </TabItem>
        </NavLink>
        <NavLink to='/home/rank'>
          <TabItem>
            <span> 排行榜 </span>
          </TabItem>
        </NavLink>
      </Tab>
      <Outlet />
    </>
  );
}

export default Home;
